<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .todo-contaienr{
      width: 800px;
      padding: 10px;
      border: 1px solid #999;
      border-radius: 10px;
      margin: 20px auto;
    }
    .todo-header{
      height: 30px;

      display: flex;
      align-items: center;
    }
    .todo-header .input{
      flex:1;
      border-radius: 4px;
      height: 80%;
      margin:0 10px;
    }
    .todo-content{
      margin-top: 20px;
    }
    .todo{
      padding: 10px;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid #999;
      border-radius: 5px;
    }
    .content{
      flex: 1;
    }
    .zanwu{
      line-height: 30px;
      font-size: 20px;
      text-align: center;
    }
    .bg-undone{
      background-color: rgb(234, 177, 177);
    }
    .bg-done{
      background-color: rgb(185, 181, 181);
    }
    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>
  <div id="app">
    <common-head></common-head>
    <common-head></common-head>
    <common-head></common-head>
  </div>
  <script src="./vue.global.js"></script>
  <script>
    const { createApp } = Vue;
    const app = createApp({});
    // 定义全局组件
    /* 
      参数1 组件名，推荐命名(2个或以上单词组件) 使用大驼峰CommonHead 或者连接符 common-head
        使用 转换成小写 <common-head/>
      参数2 是 初始化组件实例时 传入的config参数
        app.component 相当于 定义了  一个 class（初始化组件实例）
        <组件/> 使用时 new 这个class 得到组件
        config new组件时传入的配置参数
    */
    app.component('CommonHead', {
      // 模板视图
      template: `
        <div>
          这是自定义头部标签  
          <button @click="changeMsg">按钮</button>
          {{ msg }}
        </div>
      `,
      data(){
        return {
          msg: '这是组件自己的数据'
        }
      },
      methods: {
        changeMsg(){
          this.msg = '值改变了'
        }
      }
    })

    app.mount('#app')
  </script>
</body>
</html>